<template>
<div class="last-next-cp">
    <div class="last" 
        @click="onLast"
        :style="{
            cursor:lastState?'pointer':'auto',
        }">
        <i class="el-icon-back"></i>
    </div>
    <div class="next" 
        @click="onNext"
        :style="{
            cursor:nextState?'pointer':'auto',
        }">
        <i class="el-icon-right"></i>
    </div>
</div>
</template>

<script>
/*
 上下一条数据组件
 */
export default {
    props:{
        lastState:{  //上一条数据按钮状态（禁用的状态）
            type:Boolean,
            default:true,
        },
        nextState:{  //下一条数据按钮状态（禁用的状态）
            type:Boolean,
            default:true,
        },
    },
    methods:{
        onLast(){
            this.$emit('onLast');
        },
        onNext(){
            this.$emit('onNext');
        },
    },
}
</script>
<style lang="scss" scoped>
.last-next-cp{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: fit-content;
    height:fit-content;
    >div{
        margin: 7.5px 0;
        border-radius: 3px;
        padding: 5px 15px;
        font-size: 2rem;
        transition: all 0.2s;
        i{
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        &:hover{
            color:#ffffff;
            background-color: rgba(0, 0, 0, 0.2);
        }
    }
}
</style>

